<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/js/DataTables/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/Jquery/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/JqueryMobile/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="API/js/DataTables/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="API/js/Ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="API/js/Ckeditor/jquery.js"></script>
    <script type="text/javascript" src="API/js/functionsLib.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script type="text/javascript">
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 101;

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //Fin chargement page
    function OnLoad() {
        try {
            g_scenarioCurrent = $.functionsLib.getParamGet("scenarioKey");
            g_lang = $.functionsLib.getParamGet("lang");
            if(g_scenarioCurrent != ''){
                var params = {
                    keyScenar : g_scenarioCurrent
                };
                $.functionsChop.chargerSommaireScenario(params);
            }else{
                $.functionsLib.notification("Error get Scenario.", $.functionsLib.oda_msg_color.ERROR);
            }
            
            var langs = $.functionsChop.getLangs();
            
            var strHtml = '<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">';
            
            if($.functionsLib.getUserInfo().profile <= 20){
                strHtml += '<button onclick="changeMode();" id="bt_changeMode">Edition</button>';
                strHtml += '<button onclick="$.functionsChop.openPress(\''+g_scenarioCurrent+'\',\''+g_moduleCurrent+'\',\''+g_pageCurrent+'\', false);" id="bt_openPress">Open Press</button>';
            }
            strHtml += '<label for="select-more-1a" class="ui-hidden-accessible">More</label>';
            strHtml += '<select name="select-lang" id="select-lang" onchange="changeLang(this.value);">';
                        
            for(var indiceLangs in langs){
                strHtml += '<option value="'+langs[indiceLangs]["code"]+'" '+((langs[indiceLangs]["code"] == g_lang)?'selected':null)+'>'+langs[indiceLangs]["langue"]+'</option>';
            }   

            strHtml += '</select>';
            strHtml += '</fieldset>';
            $('#div_bt_action').html(strHtml).trigger("create");
            
        } catch (er) {
            $.functionsLib.log(0, "ERROR(OnLoad):" + er.message);
        }
    }
    
    function changeLang(p_value) {
        try {
            g_lang = p_value;
            
            reload();
        } catch (er) {
            $.functionsLib.log(0, "ERROR(ChangeLang):" + er.message);
        }
    }
    
    function changeMode() {
        try {
            if(g_mode == 'read'){
                g_mode = 'edit';
                $('#bt_changeMode').buttonMarkup({theme: 'b'});
            }else{
                g_mode = 'read';
                $('#bt_changeMode').buttonMarkup({theme: 'a'});
            }
            
            reload();
        } catch (er) {
            $.functionsLib.log(0, "ERROR(ChangeMode):" + er.message);
        }
    }
    
    function reload() {
        try {
            var params = {
                keyScenar : g_scenarioCurrent
            };
            $.functionsChop.chargerSommaireScenario(params);
            
            if((g_pageCurrent != "")&&(g_moduleCurrent != "")){
                var tabParams = {
                    scenario : g_scenarioCurrent,
                    module : g_moduleCurrent,
                    page : g_pageCurrent
                };
                
                $.functionsChop.chargerPage(tabParams);
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(reload):" + er.message);
        }
    }
</script>

<style>
/* default styles here for older browsers. 
   I tend to go for a 600px - 960px width max but using percentages
*/
/* Stack all blocks to start */
.oda-block-a, 
.oda-block-b { 
    width: 100%; 
    float:none; 
} 
@media only screen and (min-width:960px){
    /* styles for browsers larger than 960px; */
    .oda-block-a{ 
        float:left; 
        width:50%; 
    }
    .oda-block-b{ 
        float:right; 
        width:50%; 
    }
}
@media only screen and (min-width:1024px){
    /* styles for browsers larger than 1440px; */
    .oda-block-a{ 
        float:left; 
        width:40%; 
    }
    .oda-block-b{ 
        float:right; 
        width:60%; 
    }
}
@media only screen and (min-width:1600px){
    /* for sumo sized (mac) screens */
    .oda-block-a{ 
        float:left; 
        width:30%; 
    }
    .oda-block-b{ 
        float:right; 
        width:70%; 
    }
}
</style>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./api_page_contact.html?mili='+$.functionsLib.getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->
        
        <!-- navbar -->
        <!-- /navbar -->

        <!-- content -->
        <div data-role="content" id="main_content">
            
            <!-- PopUp -->
            <div data-role="popup" id="popup" class="ui-content">
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
                <div>
                    <label id="label_popup"></label>
                    <div id="div_popup"></div>
                </div>
            </div>
            <!-- /PopUp -->
            
            <div id="div_bt_action"></div>
            
            <div class="oda-block-a">
                <div data-role="collapsible" data-collapsed="false" data-mini="true" id="content_sommaire" style="width: 99%;">
                    <h4><span id="span_sommaire_titre">Le sommaire</span></h4>
                    <div id="div_sommaire_resume">Anomalie code EXXX</div>
                    <div id="div_sommaire_content">Anomalie code EXXX</div>
                </div> 
            </div>

            <div class="oda-block-b">
                <div data-role="collapsible" data-collapsed="false" data-mini="true" id="content_page" style="display: none;width: 99%;">
                    <h4><span id="span_titre">Le vide</span></h4>
                    <div id="div_content">Anomalie code EXXX</div>
                    <div id="div_tips">Anomalie code EXXX</div>
                    <div id="div_nav" style="width: 100%">
                        <table style="width: 100%">
                            <tr>
                                <td style="text-align: left" id="leftNav">Left</td>
                                <td style="text-align: right" id="rightNav">Right</td>
                            </tr>
                        </table>
                    </div>
                </div> 
            </div>
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./api_page_faq.html?mili='+$.functionsLib.getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./api_page_sortie.html?mili='+$.functionsLib.getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>